<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/iconfont/iconfont.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="javascript" src="../../script/swiper.min.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .group-detail-users {
            padding: .2rem .2rem .2rem;
            text-align: center;
            background-color: #fff;
        }

        .group-detail-user:first-child {
            border: 1px solid #ffc32a;
        }

        .group-detail-user {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            height: 2.5rem;
            width: 2.5rem;
            border-radius: 50%;
            margin-right: .2rem;
            border: 1px solid #f2f2f2;
        }

        .group-detail-user .leader {
            position: absolute;
            left: -0.8rem;
            top: -0.2rem;
            width: 2rem;
            height: 1rem;
            font-size: 0.5rem;
            text-align: center;
            background-color: #ffab33;
            border: 1px solid #fff;
            border-radius: 12px;
            color: #9f7200;
        }
        /*参团人数结束,剩余时间*/

        .group-detail-buy {
            background-color: #fff;
            padding: .4rem .1rem .2rem;
        }

        .group-detail-buy-tip {
            font-size: 0.6rem;
            color: #151516;
            overflow: hidden;
            text-align: center;
            font-weight: 200;
        }

        .group-detail-notice-container {
            position: relative;
        }

        .group-detail-notice {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 0 .1rem 0 .1rem;
            background-color: #fff;
            color: #333;
            font-size: .8rem;
            overflow: hidden;
            width: 100%;
            height: 1.5rem;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            border-top: 1px solid #e5e5e5;
        }

        .group-detail-notice .title {}

        .group-detail-notice .notice-info {
            font-size: 0.6rem;
            float: right;
            text-align: right;
        }

        .row-three-item {
            width: 33%;
            position: relative;
            display: inline-block;
            margin-bottom: 0.05rem;
            overflow: hidden;
            margin-left: 0.05rem;
        }

        .row-three-item .goodimg {
            width: 4rem;
            height: 4rem;
        }

        .row-three-item .goodimg img {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .row-three-item .goodtitle {
            height: 1.8rem;
            color: #333;
            padding: 0.2rem 0.2rem 0;
            width: 100%;
            font-size: 0.5rem;
            overflow: hidden;
        }

        .comment-taginfo {
            color: #58595b;
            font-size: 0.6rem;
            display: flex;
        }

        .comment-taginfo span {
            background-color: #fceae9;
            padding: 0.2rem;
            margin: 0 0.6rem 0.2rem;
            display: inline-block;
        }

        .producttitle {
            font-weight: 500;
            line-height: 0.8rem;
            font-size: 0.8rem;
            padding: 0 0.4rem 0.4rem;
        }

        .product-des {
            font-size: 0.6rem;
            line-height: 1.2rem;
            padding-left: 0.3rem;
            color: #58595b;
        }

        .product-content {
            color: #58595b;
        }

        .product-content .descript {
            background-color: #fafafa;
            border-radius: 0.2rem;
            margin: 0.4rem;
            font-size: 0.6rem;
        }

        .product-content .product-img {
            width: 100%;
            overflow: hidden;
            border: none;
        }

        .goods-direct-btn {
            color: #fff;
            text-align: center;
            background-color: #f3aba7;
        }

        .goods-group-btn {
            background-color: #e02e24;
            color: #fff;
            text-align: center;
        }

        .serviceinfo-pop {}

        .group-detail-goods-services {
            overflow: hidden;
            padding: 0rem .5rem .2rem;
            background-color: #fffff5;
            font-size: 0.6rem;
            height: 4rem;
            color: #666;
        }

        .group-detail-goods-services .tiptitle {
            font-size: 0.8rem;
            line-height: 1.6rem;
            color: #f1c40f;
        }

        .open-service-arrow {
            float: right;
            font-size: 0.6rem;
            line-height: 1rem;
            top: 0.5rem;
        }

        .group-detail-goods-services-list {
            overflow: hidden;
            float: left;
            position: relative;
            line-height: 2rem;
        }

        .group-detail-goods-services-list .item {
            margin-right: 0.2rem;
            float: left;
            margin-left: .2rem;
            position: relative;
            padding-left: .2rem;
        }

        .icon-dunpai {
            color: #e02e24;
        }
        /* service popinfo*/

        .group-detail-goods-services-detail {
            position: fixed;
            bottom: 0;
            background-color: #fff;
            width: 100%;
            z-index: 2001;
            padding-bottom: 5rem;
        }

        .group-detail-goods-services-detail .service-closebtn {
            position: absolute;
            top: 0.3rem;
            right: 0.6rem;
            color: #d9d9d9;
            font-size: 1rem;
        }

        .services-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .7);
            z-index: 2000;
        }

        .group-detail-goods-services-detail .title {
            display: block;
            text-align: center;
            line-height: 1rem;
            height: 2rem;
            font-size: 1rem;
            color: #151516;
            padding: 0.6rem 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .group-detail-goods-services-detail .group-detail-goods-services-list {
            float: none;
            height: auto;
            width: 100%;
            margin: 0;
            padding: .2rem .2rem 0;
        }

        .group-detail-goods-services-detail .group-detail-goods-services-list .item {
            position: relative;
            padding-left: 1rem;
            float: none;
            font-size: 0.6rem;
            color: #151516;
            margin: 0;
        }

        .group-detail-goods-services-detail .group-detail-goods-services-list .item .service-title {
            line-height: 2rem;
        }

        .group-detail-goods-services-detail .group-detail-goods-services-list .item .service-desc {
            color: #9c9c9c;
            line-height: 0.6rem;
            font-size: 0.6rem;
            padding-left: 1rem;
        }

        .btn-go {
            border: #ff2741 solid 1px;
            font-size: 0.6rem;
            line-height: 1.2rem;
            width: 5rem;
            color: #e02424;
            border-radius: 0.2rem;
            justify-content: center;
            margin-right: 0.5rem;
        }

        .btn-dian {
            border: #cccccc solid 1px;
            font-size: 0.6rem;
            line-height: 1.2rem;
            width: 5rem;
            color: #58595b;
            border-radius: 0.2rem;
            justify-content: center;
            margin-right: 0.5rem;
        }

        .swiper-pagination {
            text-align: right;
            padding-right: 0.5rem;
            bottom: 0;
            color: rgba(0, 0, 0, 0.8);
        }
        /*sku*/

        .buylayer {
            box-sizing: border-box;
            text-align: left;
        }

        .sku-selector-bg {
            position: fixed;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .7);
            z-index: 2000;
        }

        .sku-selector-main {
            position: absolute;
            width: 100%;
            bottom: 0;
            -webkit-transition: bottom .15s linear;
            transition: bottom .15s linear;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .sku-selector-main-show {
            bottom: 0;
        }

        .sku-selector-container {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0 0.2rem;
            background-color: #fff;
        }

        .sku-selector-head {
            position: relative;
            width: 100%;
            height: 3.2rem;
            border-bottom: 1px solid #f2f2f2;
        }

        .sku-selector-head img {
            position: absolute;
            height: 4rem;
            width: 4rem;
            top: -1rem;
            left: 0;
            border: 2px solid #fff;
            border-radius: .05rem;
            box-shadow: 0 0 0.02rem #58595b;
            z-index: 1;
        }

        .sku-selector-head-content {
            position: relative;
            height: 100%;
            width: 100%;
            padding: 0.2rem 0 0 4.5rem;
        }

        .sku-selector-price {
            position: relative;
            width: 100%;
            height: 1rem;
            margin-bottom: 0.2rem;
            line-height: 1rem;
            font-size: 0.8rem;
            color: #e02e24;
        }

        .sku-selector-desc {
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 0.6rem;
            line-height: 1rem;
            color: #151516;
            word-break: break-all;
            word-wrap: break-word;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .sku-selector-close-btn {
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            padding: 0.2rem;
            top: 0;
            right: 0.1rem;
        }

        #sku-selector-body {
            position: relative;
            width: 100%;
            max-height: 20rem;
        }

        .sku-specs {
            position: relative;
            width: 100%;
            padding: 0.5rem 0 0 0.2rem;
            border-bottom: 1px solid #f2f2f2;
        }

        .sku-specs-key {
            font-size: 0.8rem;
            color: #151516;
            text-align: left;
        }

        .sku-spec-value-list {
            position: relative;
            width: 100%;
            height: auto;
            margin-top: 0.2rem;
        }

        .sku-spec-value {
            position: relative;
            display: inline-block;
            width: auto;
            padding: 0.4rem;
            margin: 0 0.2rem 0.4rem 0;
            font-size: 0.6rem;
            color: #151516;
            line-height: 0.6rem;
            text-align: center;
            background-color: #f5f5f5;
            border-radius: 0.3rem;
        }

        .sku-selector-number {
            position: relative;
            width: 100%;
            height: 2rem;
            margin-bottom: 0.2rem;
            line-height: 2rem;
            font-size: 0.8rem;
            padding-left: 0.2rem;
        }

        .sku-selector-number span {
            display: inline-block;
            font-size: 0.8rem;
            color: #151516;
        }

        .sku-selector-number,
        .sku-specs {
            border-bottom: 1px solid #f2f2f2;
        }

        .sku-selector-reduce {
            position: absolute;
            right: 3.7rem;
            top: 0.3rem;
            width: 1.5rem;
            text-align: center;
            border-radius: 0.1rem;
            background-color: #e0e0e0;
            line-height: 1.2rem;
        }

        .sku-selector-input {
            position: absolute;
            background-color: #f2f2f2!important;
            right: 1.6rem!important;
            top: 0.3rem!important;
            width: 2rem!important;
            height: 1.2rem!important;
            font-size: 0.6rem!important;
            color: #151516!important;
            text-align: center!important;
        }

        .sku-selector-increase {
            position: absolute;
            right: 0;
            top: 0.3rem;
            width: 1.5rem;
            text-align: center;
            border-radius: 0.1rem;
            background-color: #e0e0e0;
            line-height: 1.2rem;
        }

        .sku-selector-bottom {
            width: 100%;
            height: 2rem;
            line-height: 0.8rem;
            font-size: 0.9rem;
            color: #fff;
            background-color: #e02e24;
            text-align: center;
            padding-top: 0.5rem;
        }

        .sku-spec-value-selected {
            color: #fff;
            background-color: #e02e24;
        }
    </style>


</head>

<body>


    <div id="detail-box" v-cloak>

        <div class="aui-content ">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in pdinfo.face_pic_list"  style="height:10rem">
                        <img :src="item">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

            <div class="aui-info bgcolor-white">
                <div class="aui-info-item">
                    <span class="sale-price aui-margin-l-5">￥{{pdinfo.pin_price/100}}
            </span>
                    <del class="delprice">￥{{pdinfo.market_price/100}}</del>
                </div>
                <div class="aui-info-item aui-margin-r-10 tuannum">已团{{pdinfo.totalsalenum}}件·{{pdinfo.needpersonnum}}人团
                </div>
            </div>
            <div class="producttitle bgcolor-white">
                {{pdinfo.title}}
            </div>
            <div class="product-des" v-html="pdinfo.short_info"></div>
            <div class="group-detail-goods-services">
                <div class="tiptitle">{{service_title}} </div>
                <ul class="group-detail-goods-services-list ">
                    <li class="item " v-for="item in service_tag"><i class="iconfont icon-dunpai"></i>{{item.tagname}}</li>
                </ul>
                <span class="open-service-arrow aui-iconfont aui-icon-right aui-margin-r-5" @click="openservice"></span>

                <div class="serviceinfo-pop" style="display: none" v-show="showservicedetail">
                    <div class="services-mask" @click="closeservice">
                        <div class="group-detail-goods-services-detail">
                            <span class="title">服务说明</span> <span class="service-closebtn aui-iconfont aui-icon-close" @click="closeservice"></span>
                            <ul class="group-detail-goods-services-list">

                                <li class="item" v-for="item in service_tag">
                                    <div class="service-title"><span class="gs-icon"></span> {{item.tagname}}
                                    </div>
                                    <div class="service-desc">{{item.descript}}</div>
                                </li>

                            </ul>
                        </div>

                    </div>

                </div>

            </div>

        </div>


        <!--pin start..-->
        <div class="aui-content" v-if="orderno>0 && buy_how==0">
            <div class="group-detail-user-wrapper">
                <ul class="group-detail-users">
                    <li class="group-detail-user" v-for="item in tuanuser">
                        <img :src="item.uinfo.logo_url" onerror="this.src='../../image/logo_default.png'">
                        <span class="leader" v-if="item.parent_orderno==0">拼主</span>
                    </li>
                </ul>


            </div>
            <div class="group-detail-buy">
                <div class="group-detail-buy-tip">

                    <div v-if="tuaninfo.status==0"><span>仅剩<b>{{tuaninfo.leftperson}}</b>个名额，</span>
                      <!-- <span><b id="tuanleft-time">00:00:00</b>后结束</span> -->
                    </div>

                    <div style="display: none" v-else> <span style="color:#f3aba7">本团已结束,请重新开团！</span></div>


                </div>
            </div>
            <div class="group-detail-notice-container">
                <div class="group-detail-notice">
                    <div class="title">拼单须知</div>
                    <div class="notice-info">人不满退款 人满发货 好友拼单</div>
                </div>
            </div>
        </div>
        <!--pin end..-->

        <!--create start...-->
        <div class="aui-content aui-margin-t-10 bgcolor-white" style="color:#151516;" v-else="runtuan.totalnum>0 && buy_how==0">
            <div class="aui-info">
                <span class="aui-info-item aui-margin-l-10">{{runtuan.totalnum}}人在开团</span>
            </div>

            <ul class="aui-list aui-media-list">

                <li class="aui-list-item aui-list-item-middle" @click="gotuan(item)" v-for="item in runtuan.list">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;">
                            <img :data-url="item.userinfo.logo_url" onload="fnLoadImage(this)" src="../../image/default_user_logo.png"  class="aui-img-round">
                        </div>
                        <div class="aui-list-item-inner" style="font-size: 0.6rem">
                            <div>{{item.userinfo.nickname}}</div>
                            <div>还差{{item.leftusers}}人，剩余<span>{{item.leftmtime}}</span>
                                <!--pin_endtime -->
                            </div>
                        </div>
                        <div class="aui-media-list-item-inner btn-go">去拼单</div>
                    </div>
                </li>



            </ul>


        </div>

        <!--create end-->


        <div class="aui-content aui-margin-t-10" style="background-color: #fff;">
            <div class="aui-info">
                <span class="aui-info-item aui-margin-l-10">商品评价({{cmtlist.totalnum}})</span>
                <span class="aui-info-item aui-margin-r-10" @click="morecomment" tapmode>查看更多 ></span>
            </div>
            <div class="comment-taginfo">
                <span class="aui-info-item" v-for="item in cmttaglist">{{item.tagname}}({{item.clicknum}})</span>
            </div>
            <ul class="aui-list aui-media-list">

                <li class="aui-list-item aui-list-item-middle  " v-for="item in cmtlist.list">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 2.4rem;">
                            <img onload="fnLoadImage(this)" :data-url="item.logo_url" class="aui-img-round" src="../../image/default_user_logo.png" />

                        </div>
                        <div class="aui-list-item-inner" style="font-size: 0.6rem">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">{{item.nickname}}</div>
                                <div class="aui-list-item-right">{{item.create_time_fmt}}</div>
                            </div>
                            <div class="aui-ellipsis-2" style="color:#58595b">
                                {{item.content}}
                            </div>
                        </div>
                    </div>
                </li>

            </ul>

        </div>


        <div class="aui-content aui-margin-t-10">

            <ul class="aui-list aui-media-list">

                <li class="aui-list-item aui-list-item-middle">

                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;">
                            <img :src="shopinfo.logo_url">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title">{{shopinfo.title}}</div>
                            <div class="aui-list-item-text" style="font-size: 0.6rem">商品数量 {{shopinfo.tproductnum}}
                                <!-- 已拼{{shopinfo.tsalenum}}万-->
                            </div>
                        </div>
                        <div class="aui-media-list-item-inner btn-dian " @click="goshop(shopinfo.id)" tapmode>进店逛逛
                        </div>
                    </div>
                </li>
            </ul>

        </div>


        <div class="aui-content">
            <div class="aui-info">
                <span class="aui-info-item aui-margin-l-10">店铺推荐</span>
            </div>
            <div class="list-box">
                <div class="row-three-item bgcolor-white" v-for="item in shoptop.list" @click="goproduct(item)">
                    <div class="goodimg"><img :src="item.tumb_pic_url"></div>
                    <div class="goodtitle">{{item.title}}</div>
                    <div class="aui-info">
                        <div class="aui-info-item">
                            <span class="sale-price aui-margin-l-5" style="font-size: 0.6rem" v-if="item.buy_how==0">￥{{item.pin_price/100}}</span>
                            <span class="sale-price aui-margin-l-5" style="font-size: 0.6rem" v-else>￥{{item.directbuy_price/100}}</span>

                        </div>
                        <div class="sale-info "  v-show="item.buy_how==0">已拼{{item.totalsalenum}}件</div>
                    </div>
                </div>
            </div>


        </div>

        <div class="aui-content aui-margin-t-10 bgcolor-white">
            <div class="aui-info">
                <span class="aui-info-item aui-margin-l-10">商品详情</span>
            </div>
            <div class="product-content">
                <p class="descript">{{pdinfo.content_txt}}</p>
                <div class="product-img">
                    <img :src="item" v-for="item in pdinfo.content_pic_list" />
                </div>
            </div>
        </div>


        <footer class="aui-bar aui-bar-tab aui-hr">
            <div class="aui-bar-tab-item" @click="goindex"><span class="iconfont icon-shouye"></span>
                <p class="aui-bar-tab-label">首页</p>
            </div>
            <div class="aui-bar-tab-item" :class="{'color-red':isfav}" @click="addfav($event)">
                <span class="iconfont icon-shoucang1"></span>
                <p class="aui-bar-tab-label">收藏</p>
            </div>

            <!-- <div class="aui-bar-tab-item">
                <span class="aui-iconfont aui-icon-question"></span>
                <p class="aui-bar-tab-label">客服</p>
            </div> -->

            <div class="aui-bar-tab-item goods-direct-btn" style="width: 0.4rem">
                <span>￥{{pdinfo.directbuy_price/100}}</span>
                <p class="aui-bar-tab-label" style="color:#fff;font-size: 0.8rem" @click="siglebuy">单独购买</p>
            </div>

            <div class="aui-bar-tab-item goods-group-btn" style="width: 0.4rem" @click="tuanbuy" v-show="orderno=='' && buy_how==0">
                <span>￥{{pdinfo.pin_price/100}}</span>
                <p class="aui-bar-tab-label" style="color: #fff;font-size: 0.8rem"> 一键开团</p>
            </div>

            <div class="aui-bar-tab-item goods-group-btn" style="width: 0.8rem;background-color: #ff0000;" v-show="orderno!='' && buy_how==0">
                <p class="aui-bar-tab-label" style="color: #fff;font-size: 0.8rem;" @click="pinbuy">立即拼单</p>
            </div>

            <div class="buylayer" style="display: none;" v-show="showbuylayer">
                <section class="sku-selector-bg" @click="closebuy" @touchmove.prevent>
                    <div class="sku-selector-main sku-selector-main-show" @click.stop>
                        <div class="sku-selector-container">
                            <div class="sku-selector-head">
                                <img :src="sku_pic_url">
                                <div class="sku-selector-head-content">
                                    <div class="sku-selector-price">￥<span>{{sku_buyprice/100}}</span></div>
                                    <div class="sku-selector-desc"><!--{{sku_field1_title}} {{sku_field2_title}}--></div>
                                </div>
                                <div class="sku-selector-close-btn aui-iconfont aui-icon-close" @click="closebuy"></div>
                            </div>
                            <div id="sku-selector-body" class="" style="overflow: hidden;">
                                <div class="sku-specs" v-for="item in pskulist">
                                    <span class="sku-specs-key">{{item.tagname}}</span>
                                    <div class="sku-spec-value-list">
                                        <span class="sku-spec-value " @click="setsku(tagitem,$event)" v-for="tagitem in item.taglist" :skuid="tagitem.id">
                                {{tagitem.item_name}}</span>
                                    </div>
                                </div>
                                <div class="sku-selector-number"><span>数量</span>
                                    <div class="sku-selector-reduce  aui-iconfont aui-icon-minus" @click="minbtn"></div>
                                    <input type="number" v-model.number="buynum" class="sku-selector-input" maxlength="5" value="1">
                                    <div class="sku-selector-increase aui-iconfont aui-icon-plus" @click="plusbtn"></div>
                                </div>
                            </div>
                            <div class="sku-selector-bottom" @click="buyit">确定</div>
                        </div>
                    </div>
                </section>
            </div>
        </footer>

    </div>
    <script language="javascript">
        var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical',
            loop: true,
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });


        function countTime(endtimestamp, itemindex) {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            //  var endDate = new Date(endtime);//2017-09-30 02:02:02
            // var end = endDate.getTime();
            //时间差
            var ele = vm.runtuan.list[itemindex];
            var leftTime = endtimestamp * 1000 - now;
            if (leftTime < 0) {
                ele.leftmtime = "00:00:00";
            }
            //定义变量 d,h,m,s保存倒计时的时间
            var d, h, m, s;
            if (leftTime >= 0) {
                d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                m = Math.floor(leftTime / 1000 / 60 % 60);
                s = Math.floor(leftTime / 1000 % 60);
            }
            var tiptxt = '00:00:00';
            if (d > 0) {
                tiptxt = timetool.leftpad(d, 2, '0') + "天:";
            }
             if(h>0){
            tiptxt += timetool.leftpad(h, 2, '0') + ":";
          }
            if (m > 0) {
                tiptxt += timetool.leftpad(m, 2, '0') + ":";
            }
            if(s>0){
            tiptxt += timetool.leftpad(s, 2, '0');
            }


          //   console.log(tiptxt);

            ele.leftmtime = tiptxt;
            //递归每秒调用countTime方法，显示动态时间效果
            if (leftTime) {
                setTimeout("countTime(" + endtimestamp + "," + itemindex + ")", 1000);
            }
        }

        var vm = new Vue({
            el: '#detail-box',
            data: {
                retback: false,
                isfav: 0, //是否收藏
                showservicedetail: false,
                product_id: 0,
                service_title: '', //服务标题
                service_tag: [],
                sku_field1_title: '请选择商品属性',
                sku_field2_title: '',
                sku_pic_url: '', //sku信息小图
                pdinfo: {
                    pin_price: 0,
                    market_price: 0
                }, //商品信息
                tuanuser: [], //本团当前人员
                tuaninfo: [],
                runtuan: [], //进心中的团
                cmttaglist: [], //评论标签
                cmtlist: [], //评论列表
                shopinfo: {}, //店铺信息
                shoptop: [], //店铺推荐
                orderno: '', //拼单会有
                buy_how:0,//支持的购买方式
                showbuylayer: false,
                pskulist: [], //sku列表
                sku_buyprice: 0, //动态改变的价格
                sku_groupcount: 0, //有几组属性标签
                pin_price: 0, //拼团价
                directbuy_price: 0, //直接购买价
                buymod: '', //购买模式
                buynum: 1, //购买数量
                sku_price_id: 0, //skuid
            },
            methods: {
              goproduct:function(item){
                $page.openwin('product_productinfo', './productinfo.html', {
                    id: item.id
                });
              },
                goshop: function(id) {
                    $page.openwin('shop_index', '../shop/index.html', {
                        id: id
                    });
                },
                morecomment: function() {
                    $page.openwin('product_commentlist', './commentlist.html', {
                        product_id: this.product_id
                    });
                },
                openservice: function() {
                    this.showservicedetail = true;
                },
                closeservice: function() {
                    this.showservicedetail = false;
                },
                gotuan: function(item) {
                  $page.openwin('product_productinfo','./productinfo.html',{orderno:item.orderno,id:item.product_id},true);

                },

                minleft: function(item) {
                    console.log('d');
                    setTimeout('vm.minleft(' + item + ')', 1000);
                    return 'fdsf';

                },
                addfav: function(e) {
                    if (!vm.isfav) {
                        $page.get_data('/api/member/addHistory', 'post', {
                            data_id: this.product_id,
						              	token:$api.getStorage('token')

                        }, function(ret) {
                            var el = e.target;
                            vm.isfav = true;
                            //$(el).addClass("bgcolor-red");
                            $page.toast('收藏成功');
                        });
                    }

                },
                goindex: function() {
                    $page.openwin('root', '../../index.html');

                },
                siglebuy: function() { //直接购买
                    this.buymod = 'directbuy';
                    if (this.sku_groupcount < 1) { //没属性标签
                        this.buyit();
                    } else {
                        this.showbuylayer = true;
                    }
                },
                tuanbuy: function() { //开团购买

                    this.buymod = "pinbuy";
                    if (this.sku_groupcount < 1) { //没属性

                        this.buyit();
                    } else {
                        this.showbuylayer = true;
                    }
                },
                pinbuy: function() { //参加拼单买

                    this.buymod = "pinbuy";
                    if (this.sku_groupcount < 1) { //没属性
                        this.buyit();
                    } else {
                        this.showbuylayer = true;
                    }
                },
                minbtn: function() {
                    if (this.buynum > 1) {
                        this.buynum = this.buynum - 1;
                    }
                },
                plusbtn: function() {
                    this.buynum = this.buynum + 1;
                    if (this.pdinfo.limit_num > 0 && this.buynum > this.pdinfo.limit_num) {
                        this.buynum = this.pdinfo.limit_num;
                        $page.toast('本商品限购' + this.pdinfo.limit_num + "件");
                        return;
                    }
                },


                closebuy: function() {
                    this.showbuylayer = false;
                },
                setsku: function(item, e) {
                    var el = e.currentTarget;
                    var pnodes = el.parentNode;
                    var cldnodes = pnodes.children;

                    for (var i = 0; i < cldnodes.length; i++) {
                        if (cldnodes[i] == el) {

                            $api.addCls(el, 'sku-spec-value-selected');
                        } else {
                            $api.removeCls(cldnodes[i], 'sku-spec-value-selected');
                        }
                    }
                    var skutitle = this.sku_title + ' ' + item.item_name;
                //    this.sku_title = skutitle.replace('请选择商品属性', '');

                    this.queryskuprice();
                },
                queryskuprice: function() { //查询sku价格
                    var ele = $api.domAll(".sku-spec-value-selected");
                    if (ele == undefined) {
                        $page.toast('请选择商品属性');
                        return;
                    }
                    var sku_ids = [];
                    for (var i = 0; i < ele.length; i++) {
                        sku_ids.push($api.attr(ele[i], 'skuid'));
                    }

                    var skus = sku_ids.join(",");
                    $page.get_data('/api/product/getSkuPrice', 'post', {
                        'id': this.product_id,
                        'skus': skus
                    }, function(ret) {
                        var pricearr = ret.data;
                        var nowmod = vm.buymod;
                        vm.sku_price_id = pricearr.sku_price_id;
                        //vm.sku_pic_url = pricearr.logo_url;
                        if (nowmod == "directbuy") {
                            vm.sku_buyprice = pricearr.directbuy_price * vm.buynum;
                        } else {
                            vm.sku_buyprice = pricearr.pin_price * vm.buynum;
                        }
                    });
                },
                buyit: function() {
                    if (!this.retback) {
                        return false;
                    }
                    if (this.sku_groupcount > 0) { //有sku
                        if (!vm.sku_price_id) {
                            $page.toast('请选择属性');

                            return false;
                        }
                    }
                    //go it
                    $page.openwin('product_checkorder', './checkorder.html', {
                        product_id: this.product_id,
                        sku_id: this.sku_price_id,
                        buymod: this.buymod,
                        orderno: this.orderno,
                        buynum: this.buynum
                    });

                },
                load_init: function() {

                    $page.get_data('/api/product/getDetail', 'post', {
                        id: this.product_id
                    }, function(ret) {
                        vm.pdinfo = ret.data;
                        vm.buy_how = ret.data.buy_how;
                        vm.sku_groupcount = ret.data.skucount;
                        vm.sku_buyprice = vm.pdinfo.pin_price;
                        vm.sku_pic_url = vm.pdinfo.tumb_pic_url;
                        vm.service_title = vm.pdinfo.service_tag.service_title;
                        vm.service_tag = vm.pdinfo.service_tag.taglist;
                        if (vm.pdinfo.skucount > 0) {
                            $page.get_data('/api/product/getSkuList', 'post', {
                                'id': vm.product_id
                            }, function(ret) {
                                vm.pskulist = ret.data;
                            });
                        }

                        //店铺信息
                        $page.get_data('/api/shop/getinfo', 'post', {
                            'id': vm.pdinfo.shop_id
                        }, function(ret) {
                            vm.shopinfo = ret.data;
                        });
                        //店铺推荐
                        $page.get_data('/api/product/getList', 'post', {
                            'shop_id': vm.pdinfo.shop_id,
                            'istop': 1,
                            pagesize: 3
                        }, function(ret) {
                            vm.shoptop = ret.data;
                        });
                        //收藏状态
                        $page.get_data('/api/member/getFavStatus', 'post', {
                            'id': vm.product_id,
                            'group_flag': 'product',
                            'token':$api.getStorage('token')
                        }, function(ret) {
                            vm.isfav = ret.data.status;
                        });
                        vm.retback = true;

                    });
                    //评价标签
                    $page.get_data('/api/comment/getCommentTags', 'post', {
                        'id': this.product_id
                    }, function(ret) {
                        vm.cmttaglist = ret.data;
                    });


                    //进行中的团,本团人员
                    if (this.orderno < 1) {
                        $page.get_data('/api/product/getRunningGroup', 'post', {
                            id: this.product_id,
                            limit: 5
                        }, function(ret) {
                            vm.runtuan = ret.data;
                            for (var key in ret.data.list) {
                                //console.log(ret.data.list[key]);
                                vm.runtuan.list[key].leftmtime = countTime(vm.runtuan.list[key].pin_endtime, key);
                            }


                        });
                    } else {
                        //团用户
                        $page.get_data('/api/product/getGroupUsers', 'post', {
                            orderno: this.orderno,
                            pagesize: 5
                        }, function(ret) {
                            vm.tuanuser = ret.data;
                        });
                        //团信息
                        $page.get_data('/api/product/getTuaninfo', 'post', {
                            orderno: this.orderno
                        }, function(ret) {
                            vm.tuaninfo = ret.data;
                            console.log(vm.tuaninfo);
                            timetool.countTime(vm.tuaninfo.pin_endtime, '#tuanleft-time');
                        })
                    }
                    //商品评价
                    $page.get_data('/api/comment/getList', 'post', {
                        'id': this.product_id
                    }, function(ret) {
                        vm.cmtlist = ret.data;
                    });



                }
            }


        });

        apiready = function() {
            var pageParam = api.pageParam;
            vm.product_id = pageParam.id;
            if (pageParam.orderno) {
                vm.orderno = pageParam.orderno;
            }
            console.log(JSON.stringify(pageParam));

            vm.load_init();

        }
    </script>
</body>


</html>
